<template>
	<view class="content">
		<!-- 用户信息 -->
		<view class="top-group-view">
			<uv-status-bar></uv-status-bar>
			<image class="mine_logo" :src="base.PHPimgUrl + 'logo.png'" />
			<!-- 用户信息（已登录） -->
			<view class="head-group" v-if="userInfo_Store.isLogin" @click="handleSet">
				<image v-if="userInfo.avatar" class="head-image user-image" :src="userInfo.avatar" />
				<image v-else class="head-image" :src="base.PHPimgUrl + 'default_logo.png'" />
				<view class="mine_userInfo">
					<view class="text-ellipsis">
						{{ userInfo.name ? userInfo.name : '请设置名称' }}
						<image v-if="userInfo.new_level" :src="`${base.PHPimgUrl}vip${userInfo.new_level}.png`" mode="heightFix" />
					</view>
					<view style="margin-top: 8rpx; color: #eee">账号：{{ userInfo.mobile }}</view>
				</view>
				<image class="user_set" :src="base.PHPimgUrl + 'mine_set.png'" />
			</view>
			<!-- 未登录 -->
			<view class="head-group" v-else @click="loginClick">
				<image class="head-image" :src="base.PHPimgUrl + 'default_logo.png'" />
				<view class="mine_userInfo">
					<view class="text-ellipsis">点击前去登录</view>
					<view style="margin-top: 8rpx; color: #eee">登录即刻享受各种服务</view>
				</view>
				<image class="user_set" :src="base.PHPimgUrl + 'mine_set.png'" />
			</view>
		</view>
		<!-- 操作区域 -->
		<view class="center-group-view">
			<view class="group-view-head">
				卷卷商城订单
				<view style="color: #7f7fe9; display: flex; align-items: center" @click="handleOrder">
					全部订单
					<view class="arrow_icon">
						<dx-icons type="right" size="22rpx" color="#fff" />
					</view>
				</view>
			</view>
			<!-- 订单 -->
			<view class="order-main">
				<view v-for="(item, index) in orderList" :key="index" class="order_item" @click="handleJump(item)">
					<image :src="item.img" style="margin-bottom: 16rpx" />
					<view>{{ item.name }}</view>
				</view>
			</view>
			<!-- 我的操作 -->
			<view class="order-main my_main">
				<button v-for="(item, index) in myList" :key="index" plain class="order_item" :open-type="item.openType" @click="handleJump(item)">
					<image :src="item.img" />
					<view>{{ item.name }}</view>
				</button>
			</view>
			<!-- 设置操作 -->
			<view class="order-main my_main">
				<button v-for="(item, index) in setList" :key="index" plain :open-type="item.openType" class="order_item" @click="handleJump(item)">
					<image :src="item.img" />
					<view>{{ item.name }}</view>
				</button>
			</view>
		</view>
	</view>
	<dx-tabBar :selectedIndex="3"></dx-tabBar>
</template>

<script setup>
import base from '@/common/baseURL.js';
import { useUserinfoStore } from '@/stores/userInfo';
import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
const userInfo_Store = useUserinfoStore();

const userInfo = ref({});
const orderList = [
	{
		img: `${base.PHPimgUrl}order1.png`,
		url: '/minepages/pages/order_center?type=waitpay',
		name: '待付款'
	},
	{
		img: `${base.PHPimgUrl}order2.png`,
		url: '/minepages/pages/order_center?type=waitsend',
		name: '待发货'
	},
	{
		img: `${base.PHPimgUrl}order3.png`,
		url: '/minepages/pages/order_center?type=waitconfirm',
		name: '待收货'
	},
	{
		img: `${base.PHPimgUrl}order4.png`,
		url: '/minepages/pages/order_center?type=aftersales',
		name: '售后中'
	}
];
const myList = [
	{
		img: `${base.PHPimgUrl}mine1.png`,
		url: '/minePage/accountManage/accountManage',
		name: '账号管理'
	},
	{
		img: `${base.PHPimgUrl}mine2.png`,
		url: '/pages/mine/collect',
		name: '我的收藏'
	},
	{
		img: `${base.PHPimgUrl}mine3.png`,
		url: '/minepages/pages/interes',
		name: '我的关注'
	},
	{
		img: `${base.PHPimgUrl}mine4.png`,
		url: '/pages/dy/video',
		name: '去水印'
	},
	{
		img: `${base.PHPimgUrl}mine5.png`,
		url: '/minepages/pages/preference',
		name: '偏好类目'
	},
	{
		img: `${base.PHPimgUrl}mine6.png`,
		openType: 'contact',
		name: '联系客服'
	},
	{
		img: `${base.PHPimgUrl}mine10.png`,
		openType: 'share',
		name: '邀请用户'
	}
];

onLoad((options) => {
	getApp().globalData.higherlevelId = options.higherlevel || '';
	wx.requestSubscribeMessage();
});
onShow(async () => {
	if (userInfo_Store.isLogin) {
		//获取用户信息
		await userInfo_Store.GetUserInfo();
		userInfo.value = userInfo_Store.userInfo;
	}
});
onShareAppMessage(() => {
	return {
		title: '超级卷卷',
		path: `/pages/login/wxlogin?higherlevel=${userInfo.value.id}`,
		imageUrl: `${base.PHPimgUrl}share_logo.jpg`,
		promise: new Promise((resolve, reject) => {
			// 判断是否进行分享
			if (userInfo.value.id) {
				resolve({
					title: '超级卷卷',
					path: `/pages/login/wxlogin?higherlevel=${userInfo.value.id}`,
					imageUrl: `${base.PHPimgUrl}share_logo.jpg`
				});
			} else {
				uni.reLaunch({
					url: '/pages/login/wxlogin'
				});
				reject();
			}
		})
	};
});
// 跳转到账号设置
const handleSet = () => {
	uni.navigateTo({
		url: '/minePage/accountInfo/accountInfo'
	});
};
// 立即登录
const loginClick = () => {
	uni.reLaunch({
		url: '/pages/login/wxlogin'
	});
};
// 跳转卷卷商城订单
const handleOrder = () => {
	uni.navigateTo({
		url: '/minepages/pages/order_center'
	});
};
// 跳转页面
const handleJump = (item) => {
	if (!item.url) {
		return;
	} else if (item.url === 'web') {
		const token = userInfo_Store.accessToken;
		if (token) {
			const web = 'https://crm.superjuanjuan.com/index.html#/';
			uni.navigateTo({
				url: '/pages/web/web?url=' + encodeURIComponent(`${web}${item.jumpUrl || ''}?token = ${token} `)
			});
		} else {
			uni.reLaunch({
				url: '/pages/login/wxlogin'
			});
		}
	} else {
		uni.navigateTo({
			url: item.url
		});
	}
};
const setList = computed(() => {
	const arr = [
		{
			img: `${base.PHPimgUrl}mine7.png`,
			url: 'web',
			jumpUrl: 'pages/mine/balance',
			name: '我的账户'
		},
		{
			img: `${base.PHPimgUrl}mine8.png`,
			url: '/minepages/pages/address_manage',
			name: '收货地址'
		},
		{
			img: `${base.PHPimgUrl}mine9.png`,
			url: '/subpages/pages/shop/shop_car',
			name: '购物车'
		}
	];
	return userInfo.value.new_level === 3
		? [
				...arr,
				{
					img: `${base.PHPimgUrl}mine11.png`,
					url: 'web',
					name: '数据中心'
				}
		  ]
		: arr;
});
</script>

<style scoped>
.content {
	background-color: #fff;
	min-height: 100%;
	font-family: PingFang SC, PingFang SC;
	font-size: 26rpx;
}

.top-group-view {
	width: 100%;
	height: 586rpx;
	padding-left: 24rpx;
	padding-right: 30rpx;
	box-sizing: border-box;
	background-color: #7f7fe9;
	background-image: url(https://shop.superjuanjuan.com/public/image/mine_bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #fff;
}

.mine_logo {
	width: 126rpx;
	height: 36rpx;
	margin-top: 24rpx;
	margin-bottom: 54rpx;
}

.head-group {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 74rpx;
	padding-top: 20rpx;
}

.head-image {
	flex: none;
	height: 154rpx;
	width: 154rpx;
	border-radius: 50%;
	margin-right: 24rpx;
}

.user-image {
	border: 4rpx solid #fff;
}

.mine_userInfo {
	flex: auto;
	font-size: 26rpx;
}

.user_set {
	position: absolute;
	top: 0;
	right: 0;
	width: 48rpx;
	height: 48rpx;
	margin-left: 24rpx;
}

.text-ellipsis {
	display: flex;
	font-size: 34rpx;
	font-weight: 700;
}

.text-ellipsis image {
	flex: none;
	height: 40rpx;
	margin-left: 8rpx;
}

.center-group-view {
	background: #fff;
	border-radius: 32rpx 32rpx 0px 0px;
	margin-top: -170rpx;
	padding: 24rpx;
	box-sizing: border-box;
	color: #333;
}

.group-view-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #666;
	font-size: 26rpx;
}

.arrow_icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28rpx;
	height: 28rpx;
	border-radius: 50%;
	background-color: #7f7fe9;
	margin-left: 8rpx;
}

.order-main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 40rpx;
	padding-bottom: 18rpx;
	box-sizing: border-box;
}

.content .order_item {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 25%;
	margin: 0 0 30rpx;
	padding: 0;
	border: 0;
	font-size: 26rpx;
	color: #333;
	line-height: 32rpx;
}

.order_item image {
	width: 76rpx;
	height: 76rpx;
	margin-bottom: 4rpx;
}

.my_main {
	background-color: rgba(145, 151, 238, 0.1);
	padding-top: 48rpx;
	border-radius: 32rpx;
	margin-bottom: 48rpx;
}
</style>
